{extend name="user/index" /}

{block name="title"}
<title>[ Group List ]</title>
{/block}

{block name="css"}
{css href="_CSS_bootstrap-switch.min.css"}
{css href="_CSS_score.css"}
{/block}

{block name="main"}
<div class="container mt40">
    <div class="row">
        <h1 style="font-size:35px">
            <i class="icon icon-group icon-3x"></i>
            班期列表
            <small>Group List</small>
            <button type="button" class="btn btn-primary pull-right" data-moveable="true" data-toggle="modal" data-target="#addbox" data-backdrop="false">添加班期</button>
        </h1>
    </div>

    <div class="row text-center">
        <div class="col-md-6">
            <table class="table table-hover table-bordered table-striped mt30">
                <tr class="text-center">
                    <th><i class="icon icon-tags"></i> 班期</th>
                    <th><i class="icon icon-eye-open"></i> 主页显示</th>
                    <th><i class="icon icon-star-half-full"></i> 注册状态</th>
                    <th class="col-md-1"><i class="icon icon-refresh"></i> 操作</th>
                </tr>
                <tbody style="font-size:19px">
                {volist name="list" id="v" mod="2"}
                {eq name="mod" value="0"}
                <tr>
                    <td style="font-size: 25px">{$v['class_name']}</td>
                    <td>
                        <input type="checkbox" name="coverlist" data-on-text="显示" data-off-text="隐藏"
                               data-on-color="success" {$v['cover']==1 ? 'checked' : ''} data-gid="{$v['id']}">
                    </td>
                    <td>
                        <input type="checkbox" name="statuslist" data-on-text="开通" data-off-text="关闭"
                               data-on-color="primary" {$v['status']==1 ? 'checked' : ''} data-gid="{$v['id']}">
                    </td>
                    <td>
                        <button class="btn btn-danger" onclick="return btns(this)" data-gid="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-hover table-bordered  table-striped mt30">
                <tr>
                    <th><i class="icon icon-tags"></i> 班期</th>
                    <th><i class="icon icon-eye-open"></i> 主页显示</th>
                    <th><i class="icon icon-star-half-full"></i> 注册状态</th>
                    <th class="col-md-1"><i class="icon icon-refresh"></i> 操作</th>
                </tr>
                <tbody style="font-size:19px">
                {volist name="list" id="v" mod="2"}
                {eq name="mod" value="1"}
                <tr>
                    <td style="font-size: 25px">{$v['class_name']}</td>
                    <td>
                        <input type="checkbox" name="coverlist" data-on-text="显示" data-off-text="隐藏"
                               data-on-color="success" {$v['cover']==1 ? 'checked' : ''} data-gid="{$v['id']}">
                    </td>
                    <td>
                        <input type="checkbox" name="statuslist" data-on-text="开通" data-off-text="关闭"
                               data-on-color="primary" {$v['status']==1 ? 'checked' : ''} data-gid="{$v['id']}">
                    </td>
                    <td>
                        <button class="btn btn-danger" onclick="btns(this)" data-gid="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}
                </tbody>
            </table>
        </div>
    </div>

    <hr>
    <div class="col-md-12 text-center">
        <address>
            <a href="http://www.itxdl.cn" target="_blank" style="color:#333">
                Copyright&nbsp;
                <span class="glyphicon glyphicon-copyright-mark"></span>
                &nbsp;2015&nbsp;&nbsp;• itxdl.cn
            </a> 丨
            <a href="http://weibo.com/sosdust" target="_blank" style="color:#333"> 探索者丶枫 [ 讲师.黄超 ]</a>
        </address>
    </div>
</div>


<div class="modal fade" id="addbox">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h3 class="modal-title">
                    <span class="hidden-xs">🟠 鼠标按住此标题，可移动此框位置</span>
                </h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" name="addForm">
                    <div class="form-group">
                        <label for="group" class="col-md-2 control-label">班期</label>
                        <div class="col-md-8">
                            <input type="text" name="class_name" class="form-control" id="group" placeholder="请输入班期，如:s55">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label">主页显示</label>
                        <div class="col-md-8">
                            <label class="checkbox-inline">
                                <input type="radio" name="cover" value="1"> 显示
                            </label>
                            <label class="checkbox-inline">
                                <input type="radio" name="cover" value="0" checked> 隐藏
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label">注册状态</label>
                        <div class="col-md-8">
                            <label class="checkbox-inline">
                                <input type="radio" name="status" value="1"> 开通
                            </label>
                            <label class="checkbox-inline">
                                <input type="radio" name="status" value="0" checked> 关闭
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class=" col-md-8 col-md-offset-2">

                        <br>
                        <span>💡 主页显示, 可控制 点名器/积分页面的 班期信息</span><br>
                        <span>💡 注册状态, 可控制 注册页面的 班期信息</span>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" onclick="addData()">添加</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
{JS href="_JS_bootstrap-switch.min.js"}
<script>
    $('[data-toggle="tooltip"]').tooltip();
    $("[name='coverlist'],[name='statuslist']").bootstrapSwitch();

    // Cover
    $('input[name="coverlist"]').on('switchChange.bootstrapSwitch', function (event, state) {
        let gid = this.getAttribute('data-gid');
        let cInfo = {"id": gid, "cover": state};
        $.ajax({
            type: 'put',
            url: '/group/coverChange',
            data: cInfo,
            dataType: 'json',
            success: function (data) {
                new $.zui.Messager(data.msg, {
                    time: 4000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();
            }
        });
    });
    // Status
    $('input[name="statuslist"]').on('switchChange.bootstrapSwitch', function (event, state) {

        var gid = this.getAttribute('data-gid');
        var sInfo = {"id": gid, "status": state};
        $.ajax({
            type: 'put',
            url: '/group/statusChange',
            data: sInfo,
            dataType: 'json',
            success: function (data) {
                new $.zui.Messager(data.msg, {
                    time: 4000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();
            }
        });
    });

    // add
    function addData() {
        let data = $('#addbox [name="addForm"]').serialize();
        $.ajax({
            method: 'post',
            url: '/group',
            data: data,
            dataType: 'json',
            success: function (data) {
                let msg = data.msg + '（code: ' + data.code + '）';
                new $.zui.Messager(msg, {
                    time: 3000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();

                $('#addbox').modal('hide', 'fit');
                if (data.code === 200) {
                    setTimeout(function () {
                        location.reload();
                    }, 3000);
                }
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    }

    // delete
    function btns(obj) {
        if (confirm('不推荐删除班期，你是是否确定要【删除】？') ) {
            if (confirm('再次确认一下，真的要 [ 删除 ] 该班期记录吗?')) {
                let id = $(obj).attr('data-gid');
                $.ajax({
                    method: 'delete',
                    url: '/group/' + id,
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 200) {
                            $(obj).parents('tr').remove();
                        }
                        new $.zui.Messager(data.msg, {
                            time: 3000,
                            placement: 'top-right',
                            type: data.status,
                            close: false
                        }).show();
                    },
                    error: function () {
                        alert('操作失败，请重试！');
                    }
                });
            }
        }
    }

</script>
{/block}
